import { useMemo } from "react";
import { useComponentConfigStore } from "../../store/component-config";
import './index.scss'
import { MaterialItem } from "./MaterialItem";

export default function Material() {
	const { componentConfig } = useComponentConfigStore();
	const components = useMemo(() => {
		return Object.values(componentConfig).filter(item => item.name !== "Page");
	}, [componentConfig]);
	return (
		<div>
			{components.map((item, index) => (
                <MaterialItem name={item.name} desc={item.desc} key={`${item.name}-${index}`} />
			))}
		</div>
	);
}
